<template>
  <el-card class="box-card">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="2"
        ><div class="grid-content bg-purple">
          <el-button type="primary" plain @click="addShow = true"
            >添加分类
          </el-button>
        </div></el-col
      >
    </el-row>
    <tree-grid
      :data="categoriesList"
      :columns="columns"
      @handlerEdit="isEdit"
      @handlerDel="isDel"
    ></tree-grid>
    <!-- 添加分类弹框 -->
    <el-dialog title="添加分类" :visible.sync="addShow" width="30%">
      <el-form :model="addForm" label-width="80px" ref="addCatForm">
        <el-form-item label="分类名称">
          <el-input v-model="addForm.cat_name" auto-complete="off"></el-input>
        </el-form-item>
        <div class="block">
          <span class="demonstration">请选择分类</span>
          <el-cascader
            v-model="value"
            :options="options"
            :props="props"
            @change="handleChange"
          ></el-cascader>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="addCat">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import TreeGrid from "@/components/TreeGrid";
import { getCategoriesList, addCat } from "@/api/index";
export default {
  data() {
    return {
      // 表格每列数据配置
      columns: [
        {
          label: "分类名称",
          prop: "cat_name"
        },
        {
          label: "分类id",
          prop: "cat_id"
        },
        {
          label: "是否生效",
          prop: "cat_deleted",
          type: "template",
          template: "is_deleted"
        },
        {
          label: "分类层级",
          prop: "cat_level",
          type: "template",
          template: "level"
        },
        {
          label: "分类父id",
          prop: "cat_pid"
        },
        {
          label: "操作",
          type: "template",
          template: "opt"
        }
      ],
      // 获取商品分类列表
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      total: 0,
      categoriesList: [],
      // 添加商品分类
      addShow: false,
      value: "",
      props: {
        value: "cat_id",
        label: "cat_name",
        checkStrictly: true
      },
      options: [
        {
          cat_id: 0,
          cat_name: "一级分类",
          children: []
        }
      ],
      addForm: {
        cat_name: "",
        cat_pid: 0,
        cat_level: 0
      }
    };
  },
  methods: {
    // 获取商品分类列表
    async initList() {
      await getCategoriesList(this.queryInfo).then(({ data, meta }) => {
        if (meta.status == 200) {
          this.categoriesList = data;
          this.total = data.length;
          this.options[0].children = [...data];
        } else {
          this.$message.error(meta.msg);
        }
      });
    },
    // 添加商品分类
    async addCat() {
      await addCat(this.addForm).then(({ data, meta }) => {
        if (meta.status == 201) {
          this.$message.success(meta.msg);
          this.addShow = false;
          this.initList();
        } else {
          this.$message.error(meta.msg);
        }
      });
    },
    handleChange(value) {
      console.log(value);
      this.addForm.cat_pid = value[value.length - 1];
      this.addForm.cat_level = value.length;
    },
    isEdit(res) {
      this.categoriesList = res;
    },
    isDel(res) {
      this.categoriesList = res;
    }
  },
  components: {
    TreeGrid
  },
  created() {
    this.initList();
  }
};
</script>

<style lang="scss" scoped>
.el-col {
  line-height: 0;
  margin: 10px 0 10px -10px;
}
.tree-container {
  height: 300px;
  overflow: auto;
}
.demonstration {
  padding: 0 10px 0 0;
  display: inline-block;
  line-height: 40px;
}
.block {
  display: flex;
}
.el-cascader {
  flex: 1;
}
</style>
